<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>聚学院-线上培训</title>
  <link rel="stylesheet" href="../../lib/css/reset.min.css">
  <link rel="stylesheet" href="../../lib/css/swiper.min.css">
  <link rel="stylesheet" href="../../css/all.min.css">
  <link rel="stylesheet" href="../../lib/css/elementui.min.css">

</head>

<body>
  <div class="app-wrap" v-cloak id="jxy_online">
    <header-top></header-top>
    <header-search-global type="企业"></header-search-global>
    <common-top-nav cur="聚学院"></common-top-nav>
    <div class="bg-gray">
      <div class="container">
        <common-crumb :crumblist="crumblist"></common-crumb>
       <div class="online">
          <div class="banner_content">
            <div class="banner_main">
              <common-swiper :bannerlist="bannerlist"></common-swiper>
            </div>
            <div class="banner_con">
              <div class="banner_top">
                <img :src="item.picUrl" alt="" v-for="item,index in adList" v-if="index==0">
              </div>
                <div class="banner_bottom">
                  <img :src="item.picUrl" alt="" v-for="item,index in adList" v-if="index==1">
                </div>
            </div>
          </div>
          <div class="main_online">
              <el-tabs v-model="activeName" @tab-click="changType">
                <el-tab-pane label="线上课堂" name="first">
                  <div class="online_list">
                    <div class="online_item" v-for="item in onlineList">
                      <div class="online_top">
                        <a href="javascript:void(0)" @click="join(item.videoUrl)">
                          <img :src="item.picUrl" alt="">
                        </a>
                      </div>
                    <div class="online_bottom">
                      <a href="javascript:void(0)" @click="join(item.videoUrl)">
                        <p class="title">{{item.title}}</p>
                        <div class="footer">
                          <div class="name">{{item.title}}</div>
                          <div class="date">{{item.startTime}}</div>
                        </div>
                      </a>
                    </div>
                    </div>
                  </div>
                    <common-page :current="xianshangPage.pageNo" :all="xianshangPage.total" @btn-click="xianshanglisten"></common-page>
                </el-tab-pane>
                <el-tab-pane label="线下培训" name="second">
                  <div class="offline_list">
                    <div class="offline_item" v-for="item in offlineList">
                        <div class="offline_top">
                          <a href="">
                            <img :src="item.picUrl" alt="">
                          </a> 
                          <div class="offline_tips">
                            <div class="left"><a href="">报名</a></div>
                            <div class="right"><a href="">致电</a></div>
                          </div>
                        </div>
                        <div class="offline_bottom">
                          <a href="">
                            <div class="title">{{item.title}}</div>
                            <div class="address">
                              <i class="el-icon-location-outline"></i>{{item.area}}</div>
                            <div class="date">{{item.startTime}}</div>
                          </a>
                        </div>
                    </div>
                  </div>
                  <common-page :current="xianxiaPage.pageNo" :all="xianxiaPage.total" @btn-click="xianxialisten"></common-page>
                </el-tab-pane>
              </el-tabs>
          </div>
       </div>
      </div>
    </div>
    <el-dialog
            title="在线课堂"
            :visible.sync="videoDialogVisible"
            width="40%">
      <!--<iframe height=498 width=720 src='http://player.youku.com/embed/XMzI2NjY0MDU0MA==' frameborder=0  allowfullscreen></iframe>-->
      <video :src="videoUrl" controls="controls" autoplay="autoplay" height=620 width=580></video>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
    <common-footer></common-footer>
  </div>
  <script src="../../lib/js/vue.js"></script>
  <script src="../../lib/js/axios.min.js"></script>
  <script src="../../lib/js/swiper.min.js"></script>
  <script src="../../lib/js/elementui.min.js"></script>
  <!-- mock 数据 打包发布的时候记得移除 -->
  <script src="../../lib/js/mock.js"></script>
  <script src="../../js/all.min.js"></script>
  <script>
    online();
  </script>
</body>

</html>